import { getDictionary } from "@/api/common";
import { Select, Option, Input, Icon } from "view-ui-plus";
import { defineComponent, ref, watch, nextTick } from "vue";

export default defineComponent({
  props: {
    modelValue: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:modelValue", "change"],
  setup(props, { emit }) {
    let obj: any = props.modelValue;

    watch(
      () => props.modelValue,
      (value) => {
        obj = value;
      }
    );

    const options = ref([]);

    getDictionary({ dictType: "compare_type" }).then((res: any) => {
      options.value = res;
    });

    const selectChange = (value, i) => {
      obj[i].compareTypeCode = value;
      emit("update:modelValue", obj);
      emit("change");
    };

    const inputChange = (e, name, i) => {
      const value = e.target.value;

      obj[i][name] = value;
      emit("update:modelValue", obj);
      emit("change");
    };

    const addClick = () => {
      obj.push({
        compareTypeCode: "",
        resultRange: "",
        resultGrading: "",
        referenceStandard: "",
      });
      emit("update:modelValue", obj);
    };

    const delClick = (index) => {
      obj.splice(index, 1);
      emit("update:modelValue", obj);
    };

    return () => (
      <span>
        {props.modelValue.map((item: any, i) => {
          return (
            <div
              style={{
                display: "flex",
                alignItems: "center",
                marginBottom: "10px",
              }}
            >
              <Select
                onOnChange={(value) => selectChange(value, i)}
                model-value={item.compareTypeCode}
                style={{ width: "200px" }}
              >
                {options.value.map((op, i) => {
                  return (
                    <Option value={op.dictValue} key={op.dictValue}>
                      {op.dictLabel}
                    </Option>
                  );
                })}
              </Select>
              <div style={{ margin: "0 10px" }}>结果范围 :</div>
              <Input
                model-value={item.resultRange}
                placeholder="结果范围"
                onOnChange={(e) => inputChange(e, "resultRange", i)}
                style={{ margin: "0 10px", width: "auto" }}
              ></Input>
              <div style={{ margin: "0 10px" }}>结果分级 :</div>
              <Input
                model-value={item.resultGrading}
                placeholder="结果分级"
                onOnChange={(e) => inputChange(e, "resultGrading", i)}
                style={{ margin: "0 2px", width: "auto" }}
              ></Input>
              <div style={{ margin: "0 10px" }}>参照标准 :</div>
              <Input
                model-value={item.referenceStandard}
                placeholder="参照标准"
                onOnChange={(e) => inputChange(e, "referenceStandard", i)}
                style={{ margin: "0 10px", width: "auto" }}
              ></Input>
              {i > 0 && (
                <span onClick={() => delClick(i)}>
                  <Icon
                    type="md-close"
                    size={20}
                    color="red"
                    style={{ cursor: "pointer" }}
                  />
                </span>
              )}
              {i == 0 && (
                <span onClick={addClick}>
                  <Icon
                    type="md-add"
                    size={20}
                    color="#2d8cf0"
                    style={{ cursor: "pointer" }}
                  />
                </span>
              )}
            </div>
          );
        })}
      </span>
    );
  },
});
